@import './make-transitions.scss';

@keyframes slideInLeft {
    from {
        transform: translate3d(-100%, 0, 0);
        visibility: visible;
    }

    to {
        transform: translate3d(0, 0, -1);
    }
}
      
@keyframes slideOutLeft {
from {
    transform: translate3d(0, 0, -1);
}

to {
    visibility: hidden;
    transform: translate3d(-100%, 0, 0);
}
}

@keyframes slideInRight {
from {
    transform: translate3d(100%, 0, 0);
    visibility: visible;
}

to {
    transform: translate3d(0, 0, 0);
}
}

@keyframes slideOutRight {
from {
    transform: translate3d(0, 0, 0);
}

to {
    visibility: hidden;
    transform: translate3d(100%, 0, 0);
}
}

@keyframes slideInDown {
    from {
      transform: translate3d(0, -100%, 0);
      visibility: visible;
    }
  
    to {
      transform: translate3d(0, 0, 0);
    }
}
  
@keyframes slideOutDown {
    from {
        transform: translate3d(0, 0, 0);
    }

    to {
        visibility: hidden;
        transform: translate3d(0, -100%, 0);
    }
}

@keyframes slideInUp {
    from {
        transform: translate3d(0, 100%, 0);
        visibility: visible;
    }

    to {
        transform: translate3d(0, 0, 0);
    }
}

@keyframes slideOutUp {
    from {
        transform: translate3d(0, 0, 0);
    }

    to {
        visibility: hidden;
        transform: translate3d(0, -100%, 0);
    }
}

$slides: Down, Right, Up, Left;
@include make-transitions('slide', $slides);